// 专门用来显示内容的
import React, { Component } from 'react';

import { connect } from 'react-redux';

import { DEL_TODO, UPDATE_TODO } from './store/types';

class Content extends Component {
  render() {

    // console.log(this.props.todoList);
    return (
      <ul>
        {this.props.todoList && this.props.todoList.map(item => {
          return (<li key={item.id}>
            <input type="checkbox" checked={item.is} onChange={(e)=>{
              const obj = {
                ...item,
                is: e.target.checked
              }

              // 更新到全局状态中
              this.props.uptate(obj)
            }} />
            <h5>{item.title}</h5>
            <button onClick={()=>{
              // console.log(item);
              this.props.del(item)
            }}>删除</button>
          </li>)
        })}
      </ul>
    );
  }
}

export default connect((state)=>{
  return {
    todoList: state.todo.todoList
  }
},(dispatch)=>{
  return {
    del(item){
      dispatch({type: DEL_TODO, payload: item})
    },
    uptate(item){
      dispatch({type: UPDATE_TODO, payload: item})
    }
  }
})(Content);
